<!doctype html>
<html>
	<head>
		<title>Nox2D - NoxImage</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="../examples/global.css" media="screen,projection" />
		<script type="text/javascript" src="../javascripts/modernizr.js"></script>
		<script type="text/javascript" src="../javascripts/Nox/NoxImage.js"></script>
		<script type="text/javascript" src="../javascripts/Nox/NoxCanvas-min.js"></script>
	</head>
	<body>
		<header>
			<h1>Nox 2d - NoxImage</h1>
			<p>Way to animate image</p>
		</header>
		<div>
			<section>
				<p>Canvas can't show animated image, more precisely can't animate it.</p>
				<p class="b">Why?</p>
				<p>Because canvas render only one frame and nothing! Canvas take a first frame in image and draw it, when I load a animated .gif file. For this reason we must work with image spirte.</p>
				<p class="b">What is image sprite?</p>
				<p>Image sprite is a image which have inside more images. For example we use <a href="mill.gif" targe="_blank">mill from The Settlers 4</a>. For Nox2d we paint images on row and each image have same width, because NoxImage that widths compute automatic.</p>
				<p>For image sprite is usually better gif format than png, different you can see on <a href="mill.png" target="_blank">mill.png</a>(size about 24.5KB) and <a href="mill.gif" targe="_blank">mill.gif</a>(size about 8.5KB)</p>
				<p class="b">Ok, what is NoxImage?</p>
				<p>NoxImage is a Javascript class which have strict properties and methods for working with animations and images. For start we must known link for image and count of inside images. Optional arguments are positions and global time. For example:</p>
				<pre>new NoxImage('example/mill.gif', 5, {x: 60, y: 70}, 1200); // in same order args mean: image url, frames count, default position, interval in ms</pre>
				<br />
				<span style="background-color: green; height: 300px; width: 500px; display: inline-block">
					<canvas id="myCanvas" width="500" height="300"></canvas>
				</span>
				<script type="text/javascript">
					var myImage= window.location.href.match(/^(.*)\/[^\/]+$/)[1] + '/mill.gif';
					var n = new nox(document.getElementById('myCanvas'), Array(new NoxImage(myImage, 5, {x: 50, y: 50}, 1000)));
					n.start();
				</script>
			</section>
			<section>
				<nav>
					<a href="./licence.html">&lt;Back</a>
					<a href="../index.html">Home^</a>
					<a href="./noxapi.html">Next&gt;</a>
					<p class="right">Page 3/4</p>
				</nav>
			</section>
		</div>
	</body>
</html>